<template>
  <div class="home-page">
    <div class="welcome-section">
      <h1>欢迎使用智能OJ系统</h1>
      <p>一个集成了AI助手的智能在线判题系统</p>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.problems }}</div>
                <div class="stat-label">题目总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Collection /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.homeworks }}</div>
                <div class="stat-label">作业总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Upload /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.submissions }}</div>
                <div class="stat-label">提交总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.users }}</div>
                <div class="stat-label">用户总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="features-section">
      <h2>系统功能</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="feature-card">
            <div class="feature-icon">
              <el-icon><Edit /></el-icon>
            </div>
            <h3>题目管理</h3>
            <p>支持多种题型的创建和管理，包括编程题、选择题、填空题等</p>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="feature-card">
            <div class="feature-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <h3>AI助手</h3>
            <p>智能编程助手，提供代码审查、学习指导、调试帮助等功能</p>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="feature-card">
            <div class="feature-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <h3>实时判题</h3>
            <p>支持多种编程语言的在线编译和判题，实时反馈结果</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="recent-section">
      <h2>最近活动</h2>
      <el-card>
        <el-table :data="recentActivities" style="width: 100%">
          <el-table-column prop="type" label="类型" width="120">
            <template #default="scope">
              <el-tag :type="getActivityTypeColor(scope.row.type)">
                {{ getActivityTypeLabel(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="user" label="用户" width="120" />
          <el-table-column prop="time" label="时间" width="180" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Document, Collection, Upload, User, Edit, ChatDotRound, Monitor } from '@element-plus/icons-vue'
import api from '@/api'

// 统计数据
const stats = ref({
  problems: 0,
  homeworks: 0,
  submissions: 0,
  users: 0
})

// 最近活动
const recentActivities = ref([])

// 获取统计数据
const fetchStats = async () => {
  try {
    // 这里可以调用后端API获取统计数据
    // 暂时使用模拟数据
    stats.value = {
      problems: 25,
      homeworks: 8,
      submissions: 156,
      users: 42
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 获取最近活动
const fetchRecentActivities = async () => {
  try {
    // 这里可以调用后端API获取最近活动
    // 暂时使用模拟数据
    recentActivities.value = [
      {
        type: 'submission',
        title: '两数之和 - 提交成功',
        user: 'student1',
        time: '2024-01-15 14:30:25'
      },
      {
        type: 'homework',
        title: '第一次作业 - 已发布',
        user: 'teacher1',
        time: '2024-01-15 13:45:12'
      },
      {
        type: 'problem',
        title: '新题目 - 递归函数',
        user: 'admin',
        time: '2024-01-15 12:20:08'
      },
      {
        type: 'submission',
        title: 'Hello World - 提交成功',
        user: 'student2',
        time: '2024-01-15 11:15:33'
      }
    ]
  } catch (error) {
    console.error('获取最近活动失败:', error)
  }
}

// 获取活动类型颜色
const getActivityTypeColor = (type) => {
  const colors = {
    submission: 'success',
    homework: 'warning',
    problem: 'primary',
    user: 'info'
  }
  return colors[type] || 'info'
}

// 获取活动类型标签
const getActivityTypeLabel = (type) => {
  const labels = {
    submission: '提交',
    homework: '作业',
    problem: '题目',
    user: '用户'
  }
  return labels[type] || '其他'
}

onMounted(() => {
  fetchStats()
  fetchRecentActivities()
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
}

.welcome-section h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-section p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

.stats-section {
  margin-bottom: 40px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 3rem;
  color: #409eff;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
  color: #909399;
}

.features-section {
  margin-bottom: 40px;
}

.features-section h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: #303133;
}

.feature-card {
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-icon {
  font-size: 3rem;
  color: #409eff;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #303133;
}

.feature-card p {
  color: #606266;
  line-height: 1.6;
}

.recent-section h2 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  color: #303133;
}
</style>
